<template>
	<view style="margin-top:30px;">
		<view class="logintitle">{{ $t('register.注册') }}</view> 
		<!-- <image :src="imgUrl+'icon2.png'" mode="aspectFit" class="logo"></image> -->
		<view class="img_small">
		</view>
		<view class="inputword">
				<view class="flex">
					<view v-if="is_phone==1" style="width: 65px; border-right: 1px solid #d9d9d9;">
							<picker mode="selector" :value="defaultIndex" :range="columns" range-key="cname"  @change="pickerConfirm">
								<view>+ {{searchForm.searchMatterEnumCode}}</view>
							</picker>
					</view>
					<view class="phonecode">
						<input border="none" v-model="phone" class=""  :placeholder="$t('login.请输入手机号')" ></input>
					</view>
				</view>
				<!-- v-if="setting.checkphone==20" -->
				<view class="flex" >
					<input v-model="code" class="code" :placeholder="$t('login.请输入验证码')"
						border="none"></input>
						<view v-if="!smsState" @click="getCode(phone)">{{ $t('login.获取验证码') }}</view>
						<text v-else class="un-activate">{{ $t('login.重新发送') }}({{ times }}){{ $t('login.秒') }}</text>
				</view>
				<!-- <view class="flex" >
					<view class="phonecode">
						<input border="none" v-model="email" class=""  :placeholder="$t('register.请输入邮箱')" ></input>
					</view>
				</view> -->
				<!-- <view class="flex" v-if="setting.checkphone==10">
					<input v-model="code" class="code" :placeholder="$t('register.请输入邮箱验证码')"
						border="none"></input>
						<view v-if="!smsState" @click="getEmail(phone)">{{ $t('login.获取验证码') }}</view>
						<text v-else class="un-activate">{{ $t('login.重新发送') }}({{ times }}){{ $t('login.秒') }}</text>
				</view> -->
				
				<view class="flex">
					<input v-model="password"
						disabledColor="#ffffff" 
						class=""
						:placeholder="$t('login.请输入密码')"
						border="none"></input>
				</view>
				<view class="flex" @click="tojump">
					<input v-model="surepassword"
						disabledColor="#ffffff" 
						class=""
						:placeholder="$t('register.请输入确认密码')"
						border="none"></input>
				</view>
				<view class="login" @click="register(phone,code)">{{$t('register.注册')}}</view>
				<view class="agree">
					<checkbox color="#F6C416" :checked="checkagree" style="transform:scale(0.7)" />
					{{$t('login.我已同意')}}<text @click='guizeshows'>『{{$t('login.用户隐私协议')}}』</text>
				</view>
				<view class="smallgray" @click="loginjump">{{$t('register.已有账号,立即登录')}}</view> 
				<view class="logotwo">
					<!-- #ifdef MP-WEIXIN -->
					<view @click="loginChange">
						<image src="../../../../static/pages/images/wxlogin.png" mode="aspectFit"></image>
						<text>{{$t('login.微信登录')}}</text>
					</view>
					 <!-- #endif -->
					 <view v-if="platfrom == 'H5-WEIXIN'"  @click="H5weixinChange">
					 	<image src="../../../../static/pages/images/wxlogin.png" mode="aspectFit"></image>
					 	<text>{{$t('login.微信登录')}}</text>
					 </view>
				<!-- 	<view style="margin-left: 50px;" @click="phonelogin">
						<image src="../../../static/pages/images/account.png" mode="aspectFit"></image>
						<text>手机号密码登录</text>
					</view> -->
				</view> 
		</view>
		
		<view class="baoguo_guize" v-if="guizeshow">
		    <view class="baoguo_guize_banner">
		        <view class="baoguo_guize_title">《{{ guizes.article_title }}》</view>
				<view class="">
					<rich-text :nodes="article_content"></rich-text>
				</view>
		        <view class="baoguo_guize_btns" @tap="isguizeshows">
		            <view class="baoguo_guize_btns_txt">{{$t('login.我知道了')}}</view>
		        </view>
		    </view>
		</view>
		
	<!-- 	<view class="bangdindixlog" v-if="checkbindphone">
			<view class="box">
				<view class="phonebangdin">绑定手机号</view>
				<view class="codebangdindixlog" >
					<view @click="pickerShow = true" style="width: 65px; border-right: 1px solid #d9d9d9;">
							+{{searchForm.searchMatterEnumCode}}
							<picker 
							:value="defaultIndex" 
							itemHeight="100" 
							:range="columns" 
							:showToolbar="true" 
							title="手机号前缀"  
							@confirm="pickerConfirm" 
							:show="pickerShow" 
							:closeOnClickOverlay="true"
							@cancel="pickerShow = false" 
							keyName="ename" placeholder="请输入手机号"></picker>
					</view>
					<view class="phonecode">
						<input border="none" v-model="bangdinphone" class=""  placeholder="请输入手机号" ></input>
					</view>
				</view>
				<view class="codebangdindixlog codeslide" >
					<input v-model="scode"  class="code" placeholder="请输入验证码"
						></input>
						<view v-if="!smsState" @click="getbangdinCode(bangdinphone)">获取验证码</view>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
				</view>
				<view class="btns">
					<view class="cancel" @click="checkbindphone = false,bangdincode = ''">取消</view>
					<view class="surebangdin" @click="bindphone(bangdinphone,scode)">绑定</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	const app = getApp();
	const times = 60;
	let request = require('../../../../utils/require');
	let platfrom = require('../../../../core/platform.js')
	export default {
		data() {
			return {
				checkbindphone:false,
				imgUrl:app.globalData.imgUrl,
				platfrom:platfrom.default,
				bangdincode:'',
				bangdinphone:'',
				password:null,
				surepassword:null,
				guizeshow: false,
				phone:null,
				code:null,
				scode:null,
				times:60,
				is_phone:0,
				smsState: false,
				checkagree:false,
				article_content: '',
				guizes: {
				    article_title: ''
				},
				columns:[],
				pickerShow:false,
				searchForm:{
					searchMatterEnumCode:86,
					searchMatterEnumName:'中国'
				},
				setting:uni.getStorageSync("setting"),
				checkbindphone:false,
				defaultIndex:0,
				email:'',
			}
		},
		onload(){
			
		},
		onShow(){
			this.getCountryQianZhui();
			this.guize();
		},
		methods: {
			H5weixinChange(){
					var that = this;
					var code = this.getUrlParam('code'); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
					var local = window.location.href;
					console.log(code, 8676);
					var redirect_url = encodeURIComponent(local); //回调的地址要编码
					if (code == null || code === '') {
						this.getUserProfile();
					} else {
						var data = {
							code: code
						};
						request.post(`index.php?s=/api/user/loginwx&wxapp_id=` + uni.getStorageSync('web_id'), data).then(result => {
							console.log(result, 678);
							that.token = result.data.data.token;
							uni.setStorageSync('token', that.token);
							uni.navigateTo({
								url:"/pages/my/my"
							})
						});
					}
			},
			getUserProfile() {
				if (!this.islogin) {
					if(platfrom.default=='H5-WEIXIN'){
						request.post(`index.php?s=/api/user/getCode&wxapp_id=` + uni.getStorageSync('web_id')).then(result => {
							console.log(result, 78);
							window.location = result.data;
						});
						
					}else{
						uni.navigateTo({
							url:"/pages/mys/login/login"
						})
					}
				}
			},
			getUrlParam(code) {
				var reg = new RegExp('(^|&)' + code + '=([^&]*)(&|$)');
				var r = window.location.search.substr(1).match(reg);
				if (r != null) return unescape(r[2]);
				return null;
			},
			//登录/注册
			loginChange(){
				let that = this;
				uni.getUserProfile({
					desc: '用于完善会员资料',
					success: result => {
						uni.login({
							success: res => {
								// 发送 res.code 到后台换取 openId, sessionKey, unionId
								if (res.code) {
									//发起网络请求
									let code = res.code; // console.log(code)
									uni.setStorageSync('userInfo', result.userInfo);
									let userInfo = uni.getStorageSync('userInfo');
									let data = {
										code: code,
										//login获取code
										user_info: userInfo,
										//用户信息
										from: 'common',
										encrypted_data: result.encryptedData,
										//加密信息
										iv: result.iv,
										signature: result.signature,
										referee_id: uni.getStorageSync('referee_id') // invited_id:wx.getStorageSync('sceneArr').user_id,
									};
									request.post(`index.php?s=/api/user/login&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
										console.log(res, '22222');
										if (res.data.code == 1) {
											that.token = res.data.data.token;
											uni.setStorageSync('token', that.token);
											uni.navigateTo({
												url:"/pages/my/my"
											})
											
										}
									});
								} else {
									uni.showToast({
										title: this.$t('login.网络似乎开小差了'),
										icon: 'none',
										duration: 2000
									});
								}
							}
						}); //获取用户登录信息
					},
					fail: res => {
						uni.showToast({
							title: this.$t('login.您没有登录，将无法使用部分功能'),
							icon: 'none',
							duration: 2000
						});
					}
				});
			}, 
			 gerenxinxi() {
			 	var that = this;
			 	var data = {
			 		token: uni.getStorageSync('token')
			 	};
			 	request.get(`index.php?s=/api/user/detail&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
			 		if (res.data.code == 1) {
			 			if ((res.data.data.userInfo.mobile == '' || res.data.data.userInfo.mobile == 0) && uni.getStorageSync('setting')['is_getphone'] == 1) {
			 					that.checkbindphone = true;
								return;
			 			}
						
						uni.showToast({
						    title: this.$t('login.登录成功'),
						    icon: 'success',
						    duration: 2000
						});
						setTimeout(function(){
							uni.switchTab({
								url:'/pages/mine/mine'
							})
						},1000)
			 		}
			 	});
			 },
			bindphone(e){
				let that = this
				// var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!e){
					uni.showToast({
					    title: this.$t('login.请输入手机号'),
					    icon: 'none',
					    duration: 2000
					});
					return false
				}
				// if(!reg_tel.test(e)){
				// 	uni.showToast({
				// 	    title: '手机号格式错误',
				// 	    icon: 'none',
				// 	    duration: 2000
				// 	});
				// 	return false
				// }
				var data = {
					token: uni.getStorageSync('token'),
					mobile:this.bangdinphone,
					smsCode:this.scode,
				};
				request.get(`index.php?s=/api/user/changePhone&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/mine/mine'
							})
						}, 1000);
					}else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2000
						});
					}
				});
			},
			loginjump(){
				uni.navigateTo({
					url:'../login'
				})
			},
			phonelogin(){
				uni.navigateTo({
					url:'../login'
				})
			},
			pickerConfirm(e) {
				 this.defaultIndex = e.detail.value;
			     this.searchForm.searchMatterEnumCode = this.columns[e.detail.value].areanum;
			     this.searchForm.searchMatterEnumName = this.columns[e.detail.value].cname;
			 },	
			 getCountryQianZhui() {
			 	var that = this;
			 	var data = {
			 		// token: uni.getStorageSync('token')
			 	};
			 	request.get(`index.php?s=/api/page/getCountryQianZhui&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
			 		if (res.data.code == 1) {
			 			this.columns = res.data.data;
						console.log(res.data.data);
			 		}
			 	});
			 },
			register(p,c){
				let data = {
					tel_code:this.searchForm.searchMatterEnumCode,
					mobile:this.phone,
					smsCode:this.code,
					password:this.password,
					surepassword:this.surepassword,
					// email:this.email,
				}
				if(this.password != this.surepassword){
					uni.showToast({
					    title: this.$t('register.两次密码不一致'),
					    icon: 'none',
					    duration: 2000
					});
					return false;
				}
				request.post(`index.php?s=api/passport/register&wxapp_id=` + uni.getStorageSync('web_id'),data).then((res) => {
				    if (res.data.code == 1) {
				        uni.showToast({
				            title: res.data.msg,
				            icon: 'none',
				            duration: 2000
				        });
						setTimeout(function(){
							uni.navigateTo({
								url:'/pages/mys/login/login'
							})
						},1500)
				    }else{
						uni.showToast({
						    title: res.data.msg,
						    icon: 'none',
						    duration: 2000
						});
					}
				});
			},
			getbangdinCode(){
				// var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!this.bangdinphone){
					uni.showToast({
					    title: this.$t('login.请输入手机号'),
					    icon: 'none',
					    duration: 2000
					});
					return false
				}

				let data = {
					form:{
						mobile:this.bangdinphone,
						tel_code:this.searchForm.searchMatterEnumCode,
						type:40,
					}
				}
			
				console.log(data)
				request.post(`index.php?s=/api/captcha/sendSmsCaptcha&wxapp_id=` + uni.getStorageSync('web_id'),data).then((res) => {
				    if (res.data.code == 1) {
				        this.timer();
				    }
				});
			},
			getCode(){
				// var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if(!this.phone){
					uni.showToast({
					    title:  this.$t('login.请输入手机号'),
					    icon: 'none',
					    duration: 2000
					});
					return false
				}
				// if(!reg_tel.test(this.phone)){
				// 	uni.showToast({
				// 	    title: '手机号格式错误',
				// 	    icon: 'none',
				// 	    duration: 2000
				// 	});
				// 	return false
				// }
				let data = {
					form:{
						mobile:this.phone,
						tel_code:this.searchForm.searchMatterEnumCode,
						type:10,
					}
				}
			
				console.log(data)
				request.post(`index.php?s=/api/captcha/sendSmsCaptcha&wxapp_id=` + uni.getStorageSync('web_id'),data).then((res) => {
				    if (res.data.code == 1) {
				        this.timer();
				    }
				});
			},
			getEmail(){
				var reg_tel = /^(?!_)\w+([\.-]?\w+)*@(?!_)\w+([\.-]?\w+)*(\.\w{2,3})+$/;
				if(!reg_tel.test(this.email)){
					uni.showToast({
					    title:  this.$t('register.邮箱格式错误'),
					    icon: 'none',
					    duration: 2000
					});
					return false
				}
				if(!this.email){
					uni.showToast({
					    title: this.$t('register.请输入邮箱'),
					    icon: 'none',
					    duration: 2000
					});
					return false
				}
				
				let data = {
					form:{
						email:this.email,
						tel_code:this.searchForm.searchMatterEnumCode,
						type:10,
					}
				}
							
				console.log(data)
				request.post(`index.php?s=/api/captcha/sendEmailCaptcha&wxapp_id=` + uni.getStorageSync('web_id'),data).then((res) => {
				    if (res.data.code == 1) {
				        this.timer();
				    }
				});
			},
			// 执行定时器
			timer() {
			  this.smsState = true
			  const inter = setInterval(() => {
			    this.times = this.times - 1
			    if (this.times <= 0) {
			      this.smsState = false
			      this.times = times
			      clearInterval(inter)
			    }
			  }, 1000)
			},
			jump(e){
				uni.navigateTo({
					url:e
				})
			},
			isguizeshows() {
				this.guizeshow = false
			},
			
			guizeshows() {
				this.guizeshow = true
			},
			//隐私协议
			guize() {
			    var that = this;
			    var data = {
			        token: uni.getStorageSync('token')
			    };
			    request.post(`index.php?s=/api/page/report_note&wxapp_id=` + uni.getStorageSync('web_id'), data).then((res) => {
			        if (res.data.code == 1) {
			            var article_content = res.data.data.detail.article_content;
			            article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
			            that.guizes =  res.data.data.detail,
			            that.article_content = article_content
			        }
			    });
			},
		}
	}
</script>

<style>
page{
	background-color: #fff;
}
	.bangdindixlog{
		width: 100%;
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0%;
		top: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 4;
	}
	.codebangdindixlog{
		margin: 15px 0;
		display: flex;
		align-items: flex-end;
		align-items: center;
		justify-content: space-between;
		padding:3px 20px!important;
		height: 35px;
		overflow: hidden;
		background: rgba(240,240,240,1);
		border-radius: 0.920139rem;
		margin-top: 10px;
	}
	.phonecode{
		width:72%;
	}
	.btns view{
		display: inline-block;
		font-weight: 200;
		padding: 4px 7px;
		color: #fff;
		border-radius: 3px;
		background-color: #8f939c;
		border-width: 1px;
		border-style: solid;
		border-color: #8f939c;
		margin-right: 10px;
	}
	.btns view.surebangdin{
		background-color: #F6C416;
		border-color: #F6C416;
		color: #000;
	}
	.btns{
		text-align: right;
	}
	.box{
		width: 84%;
		position: absolute;
		bottom: 30%;
		left: 3%;
		z-index: 5;
		background-color: #fff;
		padding: 10% 5%;
		border-radius: 6px;
	}
	.phonebangdin{
		font-size: 16px;
	}
.baoguo_guize {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baoguo_guize_banner {
    background: #fff;
    padding: 20rpx 20rpx 0 20rpx;
    margin: 30rpx;
    border-radius: 8rpx;
	overflow: scroll;
	height: 60vh;
}
.baoguo_guize_cont {
    font-size: 32rpx;
    line-height: 45rpx;
    margin-top: 20rpx;
    color: #333;
}
.baoguo_guize_cont:first-child {
    margin-top: 0;
}
.baoguo_guize_title {
    font-size: 36rpx;
    color: #333;
    text-align: center;
    margin-bottom: 30rpx;
}

.baoguo_guize_btns {
    border-top: 1px solid #e8e8e8;
    padding: 30rpx;
    margin-top: 30rpx;
}
.baoguo_guize_btns_txt {
    font-size: 35rpx;
    text-align: center;
}
.baoguo_guize_list {
    height: 700rpx;
    overflow-y: auto;
}
rich-text{font-size: 28rpx;color: #333333;line-height: 50rpx;}
.agree{
	padding: 20px 0;
	font-size: 14px;
	color: #444;
}
.agree text{
	color:#F6C416;
}
.logotwo{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40px;
}
.logotwo view{
	text-align: center;
	font-size: 12px;
	color: #666;
}
.logotwo image{
	width:40px;
	display: block;
	height: 40px;
	margin:0 auto 6px;
}
.codeslide{
	display: flex;
	align-items: flex-end;
	align-items: center;
	justify-content: space-between;
	overflow: hidden;
	margin-top: 10px;
	
}
.codeslide view{
	margin-right: 10px;
}
.smallgray{
	font-size: 12px;
	color:#666;
	padding: 10px 0 20px;
	text-align: center;
}
.logintitle{
	color: rgba(0, 0, 0, .8);
	margin: 0;
	font-size: 18px;
	padding: 20px 0;
	text-align: center;
	font-weight: 700;
}
.logo{
	width: 48px;
	height: 48px;
	display: block;
	margin:20px auto 10px;
}
.img_small{
	text-align: center;
	font-size: 14px;
	color: #666;
}

.input{
	border: 0.104167rem solid rgba(255,255,255,1);
	height: 35px;
	padding:3px 20px!important;
	overflow: hidden;
	background: rgba(240,240,240,1);
	transition: border 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
	border-radius: 0.920139rem;
	margin-top: 30px;
}

.inputword{
	width: 89%;
	margin:20px auto;
}
.code{
	width: 60%;
}

.flex{
	display: flex;
	align-items: flex-end;
	align-items: center;
	justify-content: space-between;
	padding:3px 20px!important;
	height: 35px;
	overflow: hidden;
	background: rgba(240,240,240,1);
	border-radius: 0.920139rem;
	margin-top: 10px;
}
.login{
	/* width: 370px; */
	height: 44px;
	margin: 0 auto;
	margin-top: 25px;
	text-align: center;
	line-height: 44px;
	color:white;
	background: linear-gradient(180deg, #4ad5ac 0%, #27cc9d 100%);
	border-radius: 106px 106px 106px 106px;
	opacity: 1;
}
</style>
